<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<image src="/static/images/user-back.jpg" mode="widthFix"
			style="position: absolute; width: 100%;left: 0;top: 0;"></image>
		<view class="user">
			<view class='header acea-row'>
				<view class="acea-row row-middle">
					<view class='pictrue' bindtap="chamgs">
						<image :src='imageUrl+userInfo.album_images'></image>
					</view>
					<view class='name' bindtap="chamgs">
						{{userInfo.name}}
					</view>
				</view>
			</view>
			<view class='nav acea-row row-middle'>
				<view class='item'>
					<view class='num'>{{userInfo.order_num}}</view>
					<view class="title">我的订单</view>
					<view class="num-tips" v-if="userInfo.staff_order_num > 0"> {{userInfo.staff_order_num}} </view>
				</view>
				<view class='item'>
					<view class='num'>{{userInfo.money}}</view>
					<view class="title">我的收益</view>
				</view>
			</view>
			
			<view class="box">
				<navigator class="line acea-row row-between-wrapper" :url="'/bundle/pages/birth/order?id='+userInfo.id">
					<view class="acea-row row-middle">
						<text class="iconfont icon-mianfeitixian"></text>
						<view class="title">我的订单</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/bundle/pages/birth/withdrawlist?commission='+userInfo.money+'&id='+userInfo.id">
					<view class="acea-row row-middle">
						<text class="iconfont icon-mianfeitixian"></text>
						<view class="title">我要提现</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
			
				<button open-type="contact" class="line acea-row row-between-wrapper">
					<view class="acea-row row-middle">
						<text class="iconfont icon-10"></text>
						<view class="title">联系客服</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '辅生专员中心',
					'color': true,
					'class': 'user'
				},
				imageUrl: this.imageUrl,
				userInfo: {}
			};
		},
		onLoad() {},
		onShow() {
			this.info();
		},
		methods: {
			async info() {
				const res = await this.$myRequest({
					url: '/api/fslt/info',
					data: {
						openid: uni.getStorageSync('openid')
					}
				})
				this.userInfo = res.data.data;
			},

		}
	}
</script>

<style lang="scss">
	.wap {
		padding: 0 30rpx;
		position: relative;
		background-color: #F6F6F6;
		min-height: 100vh;
	}

	.user {
		position: relative;
		z-index: 2;
	}

	.user .header {
		color: #000406;
		width: 100%;
	}

	.user .header .pictrue {
		width: 100rpx;
		height: 100rpx;
	}

	.user .header .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #fff;
		box-sizing: border-box;
	}

	.user .header .name {
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.user .header .name text {
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		color: #fff;
		margin-left: 10rpx;
		border-radius: 6rpx;
		background: #FE8802;
	}

	.user .header .iconfont {
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.nav {
		padding: 30rpx 0;
	}

	.nav .item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #000406;
		position: relative;
	}

	.nav .item .num {
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}

	.nav .item .num-tips {
		padding: 0 12rpx;
		height: 30rpx;
		background: #FE8802;
		border-radius: 20rpx;
		margin-left: 20rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
		display: inline-block;
		position: absolute;
		right: 40rpx;
		top: 0;
	}


	.box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.line {
		height: 100rpx;
		border-bottom: 1px solid #F2F2F2;
		font-size: 28rpx;
	}

	.line .iconfont {
		width: 36rpx;
		margin-right: 20rpx;
		color: #1F83FF;
		font-size: 36rpx;
		text-align: center;
	}

	.line .num {
		padding: 0 12rpx;
		height: 30rpx;
		background: #FE8802;
		border-radius: 20rpx;
		margin-left: 20rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}
</style>
